<template>
  <el-popover placement="bottom" :width="100" trigger="hover">
    <template #reference>
      <div class="flex">
        <el-avatar size="medium" :src="circleUrl"></el-avatar>
        <div class="text">{{ user.orgName }}</div>
      </div>
    </template>
    <slot name="content">
      <div class="text">个人信息</div>
      <div class="text" @click="handleEditPassword">修改密码</div>
    </slot>
  </el-popover>
  <component :is="modelName" :user="user" @handleClose="handleClose" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue'
import EditPassword from '@/views/main/component/EditPassword.vue'
import { hyRequest } from '@/service'
interface User {
  data: {
    orgName: string
  }
}
export default defineComponent({
  name: 'UserInfo',
  components: {
    EditPassword
  },
  setup() {
    const circleUrl = require('@/assets/images/陈钰琪.jpg')
    const modelName = ref('')
    const handleEditPassword = () => {
      modelName.value = 'EditPassword'
    }
    const handleClose = () => {
      modelName.value = ''
    }
    // 获取用户信息
    let user = reactive({
      orgName: ''
    })
    onMounted(() => {
      hyRequest
        .get<User>({
          url: '/asm/api/user.info',
          data: {}
        })
        .then((res) => {
          user.orgName = res.data.orgName
        })
    })
    return {
      circleUrl,
      modelName,
      user,
      handleClose,
      handleEditPassword
    }
  }
})
</script>

<style scoped lang="less">
.text {
  padding-left: 5px;
  line-height: 36px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
/deep/.el-avatar {
  img {
    width: 100%;
  }
  cursor: pointer;
}
</style>
